<template>
	<view class="layout pageBg">
		<view class="statusBar" :style="{height:getStatusBarHeight() + 'px'}"></view>
		<view class="userInfo" @click="goEdit">
			<view class="left">
				<view class="avtar">
					<image src="../../static/image/OIP-C (8).jpg" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="nickname">{{userInfo[0]?.nickname || "匿名用户"}}</view>
					<view class="ip">{{userInfo[0]?.ip || "未知"}}</view>
				</view>
			</view>
			<view class="right">
				<view class="edit">编辑信息</view>
				<uni-icons type="right" size="25"></uni-icons>
			</view>
		</view>
		<view class="box">
			<navigator :url="'/pages/userDetail/userDetail?status=' + 0 + '&name=已下载'" class="item">
				<view class="number">{{downloadList.length || 0}}</view>
				<view class="name">已下载</view>
			</navigator>
			<navigator class="item" :url="'/pages/userDetail/userDetail?status=' + 1 + '&name=已收藏'">
				<view class="number">{{LikeList.length || 0}}</view>
				<view class="name">已收藏</view>
			</navigator>
			<navigator class="item" :url="'/pages/userDetail/userDetail?status=' + 2 + '&name=已评分'">
				<view class="number">{{scoredList.length || 0}}</view>
				<view class="name">已评分</view>
			</navigator>
		</view>
		<view class="row">
			<view class="left">
				<uni-icons type="person" size="30"></uni-icons>
				<view class="text">在线咨询客服</view>
			</view>
			<button open-type="contact">在线咨询客服</button>
			<view class="right">
				<uni-icons type="right" size="30" color="#aaa"></uni-icons>
			</view>
		</view>
		<view class="row" @click="goQuestion">
			<view class="left">
				<uni-icons type="help" size="30"></uni-icons>
				<view class="text">常见问题</view>
			</view>
			<view class="right">
				<uni-icons type="right" size="30" color="#aaa"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,watch } from "vue";
	import { getStatusBarHeight } from "@/utils/system.js"
	import { onLoad,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app"
	import { getUser } from "@/api/user.js"
	
	const downloadList = ref([])
	const LikeList = ref([])
	const scoredList = ref([])
	const userInfo = ref({})
	
	downloadList.value = uni.getStorageSync("downLoadList")
	LikeList.value = uni.getStorageSync("likedList")
	scoredList.value = uni.getStorageSync("scoreList")
	
	const getUserInfo = async ()=>{
		const {data} = await getUser()
		uni.setStorageSync("userInfo",data)
	}
	
	onLoad(async()=>{
		userInfo.value = uni.getStorageSync("userInfo")
		if(!userInfo.value){
			await getUserInfo()
			userInfo.value = uni.getStorageSync("userInfo")
		}
	})
	
	//分享给好友
	onShareAppMessage(() => {
		return {
			title: "噜啦壁纸",
			path: "pages/user/user"
		}
	})
	
	//分享到朋友圈
	onShareTimeline(() => {
		return {
			title: "噜啦壁纸"
		}
	})
	const goEdit = () => {
		uni.showModal({
			title:"温馨提示",
			content:"该功能尚未开发完毕~",
			showCancel:false
		})
	}
	const goQuestion =()=>{
		uni.showModal({
			title:"温馨提示",
			content:"该功能尚未开发完毕~",
			showCancel:false
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		.userInfo {
			top: 0;
			left: 0;
			padding: 70rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #ccc;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;

				.avtar {
					width: 150rpx;
					height: 150rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.info {
					padding-left: 20rpx;
					font-size: 35rpx;

					.nickname {}

					.ip {
						font-size: 28rpx;
						padding-top: 30rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				.edit {
					font-size: 25rpx;
					padding-right: 5rpx;
				}
			}
		}

		.box {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			width: 650rpx;
			padding: 30rpx;
			background: white;
			border-radius: 20rpx;
			margin: 50rpx;

			.item {
				text-align: center;
				border-right: 1rpx solid #ccc;
				font-size: 30rpx;

				&:last-child {
					border-right: 0;
				}

				.number {
					padding: 5rpx;
				}

				.name {}
			}
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			position: relative;
			border-bottom: 1rpx solid #ccc;
			position: relative;
			button{
				position: absolute;
				width: 100%;
				opacity: 0;
			}
			.left {
				display: flex;
				align-items: center;
				z-index: 200;
				.text {
					font-size: 30rpx;
					padding-left: 20rpx;
					color: #666;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 30rpx;
					color: #aaa;
				}

			}
		}
	}
</style>